<template>
    <div class="container" >
          <div class="threecontainer" ref="threeroot">

          </div>
        <div class="uicontainer">
            <div class="rightcontainer">
                uicontainer
            </div>

        </div>
    </div>
</template>

<script>
  import * as THREE from 'three'
  import {WEBGL} from "../../node_modules/three/examples/jsm/WebGL.js"
  import { OrbitControls } from "../../node_modules/three/examples/jsm/controls/OrbitControls"
  import {RoomEnvironment} from '../../node_modules/three/examples/jsm/environments/RoomEnvironment'
  export default {
    name: "MatCanvas",
    data(){
      return{
        renderer:null,
        camera:null,
        scene:null,
      }
    },
    created() {

    },
    mounted() {
      if (WEBGL.isWebGLAvailable()) {
        this.init();
      } else {
        var warning = WEBGL.getWebGLErrorMessage();
        console.log(warning);
        this.$message.error("不支持WebGL,请使用谷歌浏览器");
      }
    },
    methods:{
      init() {

        this.renderer = new THREE.WebGLRenderer( { antialias: true } );
        this.renderer.setPixelRatio( window.devicePixelRatio );
        this.renderer.setSize( window.innerWidth, window.innerHeight);
        this.renderer.outputEncoding = THREE.sRGBEncoding;
        this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
        this.renderer.toneMappingExposure = 0.85;



        var environment = new RoomEnvironment();
        var pmremGenerator = new THREE.PMREMGenerator( this.renderer );

        this.scene = new THREE.Scene();
        this.scene.background = new THREE.Color( 0xeeeeee );
        this.scene.environment = pmremGenerator.fromScene( environment ).texture;
        this.scene.fog = new THREE.Fog( 0xeeeeee, 10, 50 );

        this.camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 1000 );
        this.camera.position.set( 4.25, 1.4, - 4.5 );

        this.controls = new OrbitControls( this.camera, this.renderer.domElement );
        this.controls.target.set( 0, 0.5, 0 );
        this.controls.update();


        this.grid = new THREE.GridHelper( 100, 40, 0x000000, 0x000000 );
        this.grid.material.opacity = 0.1;
        this.grid.material.depthWrite = false;
        this.grid.material.transparent = true;
        this.scene.add(this.grid );


        let material = new THREE.MeshPhysicalMaterial( {
          color: 0x00ff00,
          metalness: 0.6,
          roughness: 0.4,
          clearcoat: 0.05,
          clearcoatRoughness: 0.05
        } );

        // let material = new THREE.MeshPhongMaterial( {
        //   emissive: 0x00ff00,
        // } );

        let object = new THREE.Mesh( new THREE.SphereBufferGeometry( 1, 30, 30 ), material );
        object.position.set( 0, 0, 0 );
        this.scene.add( object );

        this.$refs.threeroot.appendChild(this.renderer.domElement);
        window.addEventListener( 'resize', this.onWindowResize, false );
        this.update();

      },
      onWindowResize() {
        this.camera.aspect = window.innerWidth / window.innerHeight;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize( window.innerWidth , window.innerHeight);
      },

      update()
      {
        requestAnimationFrame(this.update);
        var time = - performance.now() / 1000;
        this.grid.position.z = - ( time ) % 5;
        this.renderer.render( this.scene, this.camera );
      }
    }
  }
</script>

<style scoped lang="scss">
    .container{
        width: 100%;
        height: 100%;
        position: relative;
        .threecontainer{
            width: 100%;
            height: 100%;
        }
        .uicontainer{
            position: absolute;
            right: 0;
            top: 0;
            width: 200px;
            height: 100%;
            background-color: rgba(28, 26, 26, 0.2);
        }
    }
</style>
